<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css"
        integrity="sha384-cLRrMq39HOZdvE0j6yBojO4+1PrHfB7a9l5qLcmRm/fiWXYY+CndJPmyu5FV/9Tw" crossorigin="anonymous" />
    <style>
        body {
            max-width: 750px;
            margin: 0 auto;
        }

        body .mdui-typo {
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="mdui-typo">
        <h2>搜索引擎设置</h2>
        <div class="mdui-textfield mdui-textfield-floating-label">
            <label class="mdui-textfield-label">默认搜索引擎，可选 <code>baidu</code> / <code>google</code> / <code>bing</code> /
                <code>custom</code></label>
            <input class="mdui-textfield-input" type="text" id="defaultSearch" />
        </div>

        <div class="mdui-textfield mdui-textfield-floating-label">
            <label class="mdui-textfield-label">自定义搜索引擎链接，例如：https://baidu.com/s</label>
            <input class="mdui-textfield-input" type="text" id="customSearchURL" />
        </div>

        <div class="mdui-textfield mdui-textfield-floating-label">
            <label class="mdui-textfield-label">自定义搜索引擎关键字，例如：wd</label>
            <input class="mdui-textfield-input" type="text" id="customSearchKEY" />
        </div>

        <div class="mdui-textfield mdui-textfield-floating-label">
            <label class="mdui-textfield-label">自定义搜索引擎名，为空显示默认图标</label>
            <input class="mdui-textfield-input" type="text" id="customSearchNAME" />
        </div>
    </div>

    <h2>背景图像设置</h2>

    <div class="mdui-textfield mdui-textfield-floating-label">
        <label class="mdui-textfield-label">是否为动态壁纸，true/false</label>
        <input class="mdui-textfield-input" type="text" id="livebg" />
    </div>
    <div class="mdui-textfield mdui-textfield-floating-label">
        <label class="mdui-textfield-label">动态壁纸地址*mp4 video</label>
        <input class="mdui-textfield-input" type="text" id="livebg-src" />
    </div>

    <div class="mdui-textfield mdui-textfield-floating-label">
        <label class="mdui-textfield-label">静态壁纸地址</label>
        <input class="mdui-textfield-input" type="text" id="bkg-src" />
    </div>

    <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent mdui-center"
        onclick="save();">保存</button>

    <script>
        try {
            getID("defaultSearch").value = localStorage.getItem("defaultSearch");
            getID("customSearchURL").value = localStorage.getItem("customSearchURL");
            getID("customSearchKEY").value = localStorage.getItem("customSearchKEY");
            getID("customSearchNAME").value = localStorage.getItem("customSearchNAME");
            getID("livebg").value = localStorage.getItem("livebg");
            getID("livebg-src").value = localStorage.getItem("livebg-src");
            getID("bkg-src").value = localStorage.getItem("bkg-src");
            
        } catch (e) {
            console.warn(e)
        }
        function getID(label) {
            return document.getElementById(label);
        }
        function save() {
            try {
                localStorage.setItem("defaultSearch", getID("defaultSearch").value);
                localStorage.setItem("customSearchURL", getID("customSearchURL").value);
                localStorage.setItem("customSearchKEY", getID("customSearchKEY").value);
                localStorage.setItem("customSearchNAME", getID("customSearchNAME").value);
                localStorage.setItem("livebg", getID("livebg").value);
                localStorage.setItem("livebg-src", getID("livebg-src").value);
                localStorage.setItem("bkg-src", getID("bkg-src").value);
                mdui.snackbar({ message: '保存成功' });
            } catch (e) {
                mdui.snackbar({
                    message: '保存失败',
                    buttonText: '详情',
                    onButtonClick: function () {
                        mdui.alert(e);
                    }
                });
            }
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js"
        integrity="sha384-gCMZcshYKOGRX9r6wbDrvF+TcCCswSHFucUzUPwka+Gr+uHgjlYvkABr95TCOz3A"
        crossorigin="anonymous"></script>
</body>

</html>